.ui-g{
    height:100%
}
.ui-g-3, .ui-g-9{
    padding:0;
    overflow-y: hidden;
}
.notice-navagator{
    .notice-navagator-search{
        height: 60px;
        padding: 1em;
        background: linear-gradient(to bottom, #f6f7f9 0%, #ebedf0 100%);
        border-bottom: 1px solid #ccc;
    }
    .notice-avatar-icon{
        width: 50px;
        height: 50px;
        background-color: slateblue;
        border-radius: 50%;
    }
    .notice-navagator-list{
        padding: 0px;
    }
    .notice-navagator-footer{
        background: linear-gradient(to bottom, #f6f7f9 0%, #ebedf0 100%);
        position: absolute;
        height: 30px;
        width: 25%;
        bottom: 0px;
        text-align:center; 
        border-top:1px solid #ccc;
    }
}

@mixin  icon-image($value: '1.jpg'){
    background-image: url("../../../../assets/images/notice/" + $value);
    filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
    background-size: 100% 100%;
  }
.role-avator-1{ @include icon-image('1.jpg') }
.role-avator-2{ @include icon-image('2.jpg') }
.role-avator-3{ @include icon-image('3.jpg') }
.role-avator-4{ @include icon-image('4.jpg') }
.role-avator-5{ @include icon-image('5.jpg') }
.role-avator-6{ @include icon-image('6.jpg') }
.role-avator-7{ @include icon-image('7.jpg') }
.role-avator-8{ @include icon-image('8.jpg') }
.role-avator-9{ @include icon-image('9.jpg') }